<!DOCTYPE html>
<html>
<head>
<#include "../common/head.ftl">
</head>

<body>
<div class="wrapper2">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-1 control-label">字典项</label>
            <div class="col-sm-4 required"><input type="text" name="item" class="form-control"></div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">详情</label>
            <div class="col-sm-10 required">
                <div class="grid-wrapper">
                    <table id="grid"></table>
                </div>
            </div>
        </div>
        <div class="form-group form-btn-group">
            <div class="col-sm-12 text-right">
                <button type="submit" class="btn btn-primary">确认</button>
                <button type="button" id="cancel_btn" class="btn btn-default">取消</button>
            </div>
        </div>
    </form>
</div>
</body>
<#include "../common/scripts.ftl">
<script type="text/javascript">
    var pwin = window.pwin,grid;
    //编辑表格时用
    var lastRow,lastiRow,lastCell ;
    grid = $("#grid").jqGrid({
        height: '150',
        datatype: 'local',
        data: [
            {consumeActivityRedPacket_type:9}
        ],
        rowNum:1000,
        cellEdit:true,
        cellsubmit:'clientArray',
        colModel: [
            {label:"ID",name:"id",key:true,hidden:true},
            {label:"操作",name:"ctrl", width:100,formatter:function(val,opts,obj){
                    var html = "<div class='operating'>";
                    html += "<span class='fa fa-plus add_btn' title='添加' data-id='"+opts.rowId+"'   >&nbsp;添加</span>&nbsp;&nbsp;&nbsp;" ;
                    html += "<span class='fa fa-trash  delete_btn' title='删除'  data-id='"+ opts.rowId+"' >&nbsp;删除</span>&nbsp;&nbsp;&nbsp;" ;
                    html += "</div>";
                    return html;
                }},
            {label:"值",width:50,name:"value",formatter: "integer",editable:true},
            {label:"文本",width:100,name:"label",editable:true},
            {label:"描述",name:"meno",editable:true}
        ],
        beforeEditCell:function(rowid,nm,tmp,iRow,iCol){
            lastRow = rowid,lastCell = iCol,lastiRow = iRow;
        },
        afterSaveCell:function(rowid,nm,val,iRow,iCol){
            lastRow = null,lastCell = null,lastiRow = null;
        },
        loadComplete : function(){
            $("#grid .add_btn").on("click",addGridRow);
            $("#grid .delete_btn").on("click",removeGridRow);
        },
        afterInsertRow:function(rowid,rowdata,rowelem){
            $("#"+rowid+" .add_btn").on("click",addGridRow);
            $("#"+rowid+" .delete_btn").on("click",removeGridRow);
        }
    });
    /** 删除行 **/
    function removeGridRow(){
        var rowid = $(this).data("id");
        if($("tbody tr",grid).length>2){
            grid.jqGrid("delRowData",rowid);
        }
    };
    /** 新增行 **/
    function addGridRow() {
        //添加条数无上限
        var rowid = $(this).data("id");
        grid.jqGrid("addRowData",$.jgrid.randId(),{},"after",rowid);
    };
    /** 保存行 **/
    function saveGridRow() {
        if(lastiRow && lastCell){
            grid.jqGrid("saveCell",lastiRow,lastCell);
        }
    };
    $(".form-horizontal").validate({
// 	rules : {
// 	},
        submitHandler : function(form) {
            //保存表格
            saveGridRow();
            //基本表单
            var _form = $(".form-horizontal").serializeObject();
            var gridData = grid.jqGrid("getRowData");
            var details = new Array();
            gridData.map(function(row,index){
                details.push({"value":row.value,"label":row.label,"meno":row.meno})
            });
            _form.details = details;

            console.log(_form);

            var $btn = $("button[type='submit']",$(form));
            var oldText = $btn.text();
            if($btn.length>0){
                $btn.prop("disabled",true).html("<span class='fa fa-spinner fa-pulse'></span> 正在提交...");
                $btn.siblings("button").prop("disabled",true);
            }
            var comp = $(".form-horizontal").serializeObject();

            $.ajax({
                url : "sys_note_dict/add",
                type : "POST",
                contentType : "application/json;charset=utf-8",
                dataType : "json",
                data: JSON.stringify({sysResource:comp}),
                success : function(data) {
                    if(data.success){
                        pwin.layer.closeAll();
                        pwin.grid||pwin.grid.jqGrid().trigger("reloadGrid");
                        pwin.layer.msg(data.message);
                    }else{
                        layer.msg(data.msg);
                        $btn.prop("disabled",false).text(oldText);
                        $btn.siblings("button").prop("disabled",false);
                        return;
                    }
                }
            });
        }
    });
</script>
</html>